<template>
  <div>
    <a href="https://vue-draggable-plus.pages.dev/guide/">vue-draggable-plus</a>
    <h1>vue3拖拽库</h1>
    <div class="flex">
      <div>
        <div class="data">{{ list1 }}</div>
        <div class="title">vue架构师</div>
        <VueDraggable
          class="left"
          v-model="list1"
          animation="150"
          ghostClass="ghost"
          group="people"
          @update="onUpdate"
          @add="onAdd"
          @remove="remove"
        >
          <div v-for="item in list1" :key="item.id">
            {{ item.name }}
          </div>
        </VueDraggable>
      </div>
      <div>
        <div class="data">{{ list2 }}</div>
        <div class="title">react架构师</div>
        <VueDraggable
          class="right"
          v-model="list2"
          animation="150"
          group="people"
          ghostClass="ghost"
          @update="onUpdate"
          @add="onAdd"
          @remove="remove"
        >
          <div v-for="item in list2" :key="item.id">
            {{ item.name }}
          </div>
        </VueDraggable>
      </div>
    </div>
    <h1>简易版低代码</h1>
    <h4>pnpm i vuedraggable@next</h4>
    <div class="flex">
      <div class="leftbottom">
        <div>组件列表</div>
        <draggable
          class="list"
          v-model="list3"
          item-key="id"
          :sort="false"
          :group="{ name: 'component', pull: 'clone', put: false }"
        >
          <template #item="{ element }">
            <div class="item">{{ element.tag }}</div>
          </template>
        </draggable>
      </div>
      <div class="rightbottom">
        <div>组件渲染结果</div>
        <div class="showbox">
          <draggable
            class="showbox list"
            v-model="list4"
            item-key="id"
            :sort="true"
            :group="{ name: 'component' }"
          >
            <template #item="{ element }">
              <component
                :is="element.tag"
                v-bind="element.props"
                @input.stop="onInput"
              >
                {{ element.text }}
              </component>
            </template>
          </draggable>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'
import draggable from 'vuedraggable'
const list1 = ref([
  {
    name: '瑞哥',
    id: '1'
  },
  {
    name: '鱿鱼须',
    id: '2'
  },
  {
    name: 'Johanna',
    id: '3'
  },
  {
    name: 'Juan',
    id: '4'
  }
])
const list2 = ref([
  {
    name: '峰哥',
    id: '1'
  },
  {
    name: '垛哥',
    id: '2'
  },
  {
    name: 'hx',
    id: '3'
  },
  {
    name: 'dan',
    id: '4'
  }
])
function onUpdate() {
  console.log('update')
}
function onAdd() {
  console.log('add')
}
function remove() {
  console.log('remove')
}
function onInput(event) {
  console.log('input event:', event)
}
/* 低代码 */
const list3 = ref([
  { id: 1, tag: 'el-button', props: { type: 'primary' }, text: '按钮' },
  {
    id: 2,
    tag: 'el-input',
    props: { placeholder: '请输入内容', modelValue: '' }
  },
  { id: 3, tag: 'el-switch' }
])
const list4 = ref([])
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  text-align: center;
}
.left,
.right {
  width: 150px;
  margin: 10px 10px 0 10px;
  padding: 10px 0;
}
.left {
  background-color: pink;
}
.right {
  background-color: seashell;
}
.data {
  width: 200px;
  height: 150px;
}
.leftbottom {
  width: 200px;
  height: 600px;
  background-color: pink;
}
.rightbottom {
  flex: 1;
  height: 600px;
  background-color: seashell;
}
.list {
  .item {
    border: 1px solid blue;
    margin: 10px;
    padding: 10px;
  }
}
.showbox {
  height: 100%;
}
</style>
